<template>
  <div>
    <el-image :src="myImg" :preview-src-list="baseUrlPrImgList" fit="cover">
      <div slot="error" class="image-slot">
        <svg-icon icon-class="img_error" size="40" />
      </div>
    </el-image>
  </div>
</template>

<script>
export default {
  name: "tablePrImg",
  props: {
    imgSrc: {
      type: String,
    },
    prImgList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  computed: {
    baseUrlPrImgList() {
      return this.prImgList.map((v) => {
        return v.startsWith("http") ? v : `${this.$path}${v}`;
      });
    },

    myImg() {
      if (this.imgSrc) {
        return this.imgSrc.startsWith("http")
          ? this.imgSrc
          : `${this.$path}${this.imgSrc}`;
      } else {
        return "";
      }
    },
  },
  // created() {
  //   if (this.imgSrc) {

  //   }
  // },
};
</script>

<style lang="less" scoped>
.el-image {
  width: 40px;
  height: 40px;
  /deep/.image-slot {
    width: 100%;
    height: 100%;
    display: flex;
    i {
      margin: auto;
      font-size: 20px;
    }
  }
}
</style>
